<template>
  <div class="home-main" v-if="JSON.stringify(todoData)!='{}'">
    <div class="todo-con">
      <div class="todo-main" style="width: 26%">
        <div class="todo-top">
          <img
            src="../../assets/images/home/appliation.png"
            width="70"
            height="70"
          />
          <p>{{todoData.vo.name}}</p>
        </div>
        <div class="todo-btm" style="margin:5% 0 0 0">
          <div @click="handleLink(1)">
            <p>待办任务</p>
            <p class="font-34">{{todoData.vo.list[0].todoCount}}</p>
          </div>
          <el-divider direction="vertical"></el-divider>

          <div @click="handleLink(2)" >
            <p>超期任务</p>
            <p class="font-34" style="color:red;">{{todoData.vo.list[0].overCount}}</p>
          </div>
        </div>
      </div>
      <div class="todo-main" style="flex: 1">
        <div class="todo-top">
          <img src="../../assets/images/home/news.png" width="70" height="70" />
          <p>{{todoData.vo1.name}}</p>
        </div>
        <div class="todo-btm">
          <div class="btm-con" v-for="(item,index) in todoData.vo1.list" :key="index">
            <span style="font-weight: 600">{{item.name}}</span>
            <div
              style="
                border-bottom: 1px solid rgba(242, 242, 242, 1);
                margin: 10px 0;
              "
            ></div>
            <!-- 新闻公告 -->
            <div class="todo-detail" v-if="item.pressReleasePendingVO">
              <div  @click="handleNews(item.name)" style="height:90px">
                  <p v-if="item.pressReleasePendingVO.flag == '1'" style="font-size:15px">{{item.pressReleasePendingVO.text}}</p>
                  <p v-if="item.pressReleasePendingVO.flag == '0'" style="color:red;font-size:15px">{{item.pressReleasePendingVO.text}}</p>
              </div>


              <!-- <el-divider direction="vertical"></el-divider> -->

              <!-- <div @click="handleNews(1)">
                <p>超期任务</p>
                <p class="font-34">{{item.overCount}}</p>
              </div> -->
            </div>
            <!-- 新闻公告 -->
            <div class="todo-detail" v-else>
                  <img src="../../assets/images/home/todo.png" width="70" height="70"/>
                  <div  @click="handleNews(item.name)">
                  <p>待办任务</p>
                  <p class="font-34">{{item.todoCount}}</p>
                  </div>
              <!-- <el-divider direction="vertical"></el-divider> -->

              <!-- <div @click="handleNews(1)">
                <p>超期任务</p>
                <p class="font-34">{{item.overCount}}</p>
              </div> -->
            </div>
          </div>
        </div>
      </div>
        <!-- 财务管理 -->
        <div class="todo-main" style="width:34%">
        <div class="todo-top">
          <img
            src="../../assets/images/home/finance.png"
            width="70"
            height="70"
          />
          <p>{{todoData.vo2.name}}</p>
        </div>
        <div class="todo-btm">
          <div class="btm-con" v-for="(item2,index) in todoData.vo2.list" :key="index">
            <span style="font-weight: 600">{{item2.name}}</span>
            <div
              style="
                border-bottom: 1px solid rgba(241, 242, 242, 1);
                margin: 10px 0;
              "
            ></div>
            <div class="todo-detail">
              <img src="../../assets/images/home/todo.png" width="70" height="70"/>
              <div @click="navigateTo(item)">
                <p>待办任务</p>
                <p class="font-34">{{item2.todoCount}}</p>
              </div>
              <!-- <el-divider direction="vertical"></el-divider>

              <div>
                <p>超期任务</p>
                <p class="font-34">{{item2.overCount}}</p>
              </div> -->
            </div>
          </div>

        </div>
      </div>

    </div>
    <div class="administration">
    <div class="todo-con">
       <!-- 行政办公 -->
        <div class="todo-main" style="flex: 1">
        <div class="todo-top">
          <img
            src="../../assets/images/home/administration (1).png"
            width="70"
            height="70"
          />
          <p>{{todoData.vo3.name}}</p>
        </div>
        <div class="todo-btm" >
          <div class="btm-con" v-for="(item,index) in todoData.vo3.list" :key="index">
            <span style="font-weight: 600">{{item.name}}</span>
            <div
              style="
                border-bottom: 1px solid rgba(241, 242, 242, 1);
                margin: 10px 0;
              "
            ></div>
            <div class="todo-detail">
               <img src="../../assets/images/home/todo.png" width="70" height="70"/>
              <div @click="handleDoc(item)">
                <p>待办任务</p>
                <p class="font-34">{{item.todoCount}}</p>
              </div>
              <!-- <el-divider direction="vertical"></el-divider>

              <div @click="handleDoc(item)">
                <p>超期任务</p>
                <p class="font-34">{{item.overCount}}</p>
              </div> -->
            </div>
          </div>
        </div>
      </div>

    </div>

    </div>
     <!-- 运维管理-->
    <div class="todo-con">
         <div class="todo-main" style="width:99%;margin:0 0 15px 0">
        <div class="todo-top">
          <img
            src="../../assets/images/home/operation.png"
            width="70"
            height="70"
          />
          <p>{{todoData.vo4.name}}</p>
        </div>
        <div class="todo-btm" >
          <div class="btm-con3" v-for="(item,index1) in todoData.vo4.list" :key="index1 ">
            <span style="font-weight: 600">{{item.name}}</span>
            <div
              style="
                border-bottom: 1px solid rgba(241, 242, 242, 1);
                margin: 10px 0;
              "
            ></div>
            <div class="todo-detail">
              <img src="../../assets/images/home/todo.png" width="70" height="70"/>
              <div @click="navigateTo(item)">
                <p>待办任务</p>
                <p class="font-34">{{item.todoCount}}</p>
              </div>
              <!-- <el-divider direction="vertical"></el-divider>

              <div>
                <p>超期任务</p>
                <p class="font-34">{{item.overCount}}</p>
              </div> -->
            </div>
          </div>

        </div>
      </div>

    </div>
    <!-- 信息安全 -->
    <div class="todo-con">
         <div class="todo-main" style="width:99%;">
        <div class="todo-top">
          <img
            src="../../assets/images/home/secure.png"
            width="70"
            height="70"
          />
          <p>{{todoData.vo5.name}}</p>
        </div>
        <div class="todo-btm" >
          <div class="btm-con2" v-for="(item,index1) in todoData.vo5.list" :key="index1 ">
            <span style="font-weight: 600">{{item.name}}</span>
            <div
              style="
                border-bottom: 1px solid rgba(241, 242, 242, 1);
                margin: 10px 0;
              "
            ></div>
           <div class="todo-detail" >
              <img src="../../assets/images/home/todo.png" width="70" height="70"/>
              <div  @click="navigateTo(item)">
                <p>待办任务</p>
                <p class="font-34">{{item.todoCount}}</p>
              </div>
              <!-- <el-divider direction="vertical"></el-divider>
              <div>
                <p>超期任务</p>
                <p class="font-34">{{item.overCount}}</p>
              </div> -->
            </div>
          </div>

        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { departmentStatistic } from '@/api/home'
export default {
  name: "departmentTodo",
  props:{
   activeName:String,
  },
  data(){
    return{
        todoData:{},
        overTimeTask:""
    }
  },
  mounted(){
    this.getTodoStatistic();

  },
  methods:{
    // 待办事项跳转
    navigateTo(item) {
      const routeMapping = {
        '机房设备进出申请': '/operations/equipment',
        'IP地址申请管理': '/operations/IpAddress',
        '互联网地址端口申请': '/operations/Internet',
        '云防护策略白名单': '/operations/Cloudwhitelist',
        '业务网堡垒机权限': '/operations/NetworkMachine',
        '业务网堡垒机文件': '/operations/NetworkMachineFile',
        '专网堡垒机权限': '/operations/PrivateNetworkMachine',
        '防火墙策略开通': '/operations/firewall',
        '虚拟机资源申请': '/message/virtualMachine',
        '系统配置变更申请': '/message/systemSettings',
        '软件开发需求处理': '/message/software',
        '应用系统上线运行申请': '/message/online',
        '预算执行': '/finance/budget'
      };
        if (routeMapping[item.name]) {
          this.$router.push({ path: routeMapping[item.name] });
        }
    },
    getTodoStatistic(){
      departmentStatistic().then((result) => {
        if(result){
          this.todoData = result;
          this.overTimeTask = this.todoData.vo.list[0].overCount
        }

      })

    },
    handleLink(status){
        this.$router.push({
            path:'/businessModule/merge',
            query:{
                status,
                activeName:this.activeName
            }
        })
    },
    handleNews(status){
        if(status == '通知公告'){
            this.$router.push({
                path:'/information/notice',
            })
        }else{
             this.$router.push({
                path:'/information/news',
            })
        }

    },
    handleDoc(item,status){
       switch (item.name){
        case '请假申请管理':
          this.$router.push({
          path:'/administeration/askForLeave?status='+status,
        })
        break;
         case '加班登记管理':
          this.$router.push({
          path:'/administeration/overTimeManage?status='+status,
        })
        break;
         case '车辆使用管理':
          this.$router.push({
          path:'/administeration/vehicle?status='+status,
        })
        break;
          case '会议室使用管理':
          this.$router.push({
          path:'/administeration/conference?status='+status,
        })
        break;
         case '用章申请管理':
          this.$router.push({
          path:'/administeration/stamp?status='+status,
        })
        break;

      }

    },
  }
};
</script>

<style lang="scss" scoped>
.todo-con {
  display: flex;
  flex-direction: row;
  height: auto;
  flex-wrap:wrap;
  // justify-content: space-around;
}
.todo-main {
  width: 30%;
  background-color: #ffffff;
  border-radius: 3px;
  // box-shadow: 1px 2px 0px 1px rgba(0, 0, 0, 0.1);


  margin-right: 15px;
}
.todo-top {
  display: flex;
  flex-direction: row;
  // justify-content: space-around;
  align-items: center;
  // border-bottom: 5px solid #55a0eb;
  margin: 15px 0 0 25px;
  p {
    margin: 0 0 0 15px;
    font-size: 18px;
    font-weight: 700;
    //color: #55a0eb;
  }
}
.todo-btm {
 // border: 1px solid #55a0eb;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  p{
     margin: 10px 0;
  }
  p:first-child {
   // margin: 15px 0;
    color: #666666;
  }
  p:hover{
    color: rgb(105, 54, 243);
  }
}
  .btm-con {
   // height: 150px;
    background-color: rgba(226, 225, 225, 0.2);
   // border: 1px solid #55a0eb;
    flex: 1;
    margin: 0 10px 0 0;
    text-align: center;
    padding-top: 10px;
  }
.btm-con2 {
    height: 150px;
    background-color: rgba(226, 225, 225, 0.2);
    //border: 1px solid #55a0eb;
    flex: 20%;
    margin: 0 10px 10px 0;
    text-align: center;
    padding-top: 10px;
  }
  .btm-con3 {
   // height: 150px;
    background-color: rgba(226, 225, 225, 0.2);
   // border: 1px solid #55a0eb;
    flex: 18%;
    margin: 0 10px 10px 0;
    text-align: center;
    padding-top: 10px;
  }

.todo-detail{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

}
.font-34 {
  font-size: 34px;
  font-weight: 600;
  text-align: center;
}
.el-divider--vertical {
  display: inline-block;
  width: 2px;
  height: 50px; //更改竖向分割线长度
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}

.todo-title {
  //background-color: #409EFF;
  border-radius: 4px;
  height: 40px;
  //color: #ffffff;
  line-height: 40px;
  p {
    margin: 0 0 0 15px;
    font-size: 16px;
    font-weight: 700;
  }
}
.administration {
  width: 100%;
  background-color: #f6f5f5;
  border-radius: 5px;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 250px;
  margin: 15px 0 0 0;
}
</style>

